<template>
    <div>
      <el-table :data="paylistData" style="width: 100%">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="department" label="科室"></el-table-column>
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column prop="cases" label="病例"></el-table-column>
        <el-table-column prop="examination" label="检查"></el-table-column>
        <el-table-column prop="medication" label="药品"></el-table-column>
        <el-table-column prop="examinationprice" label="检查费用"></el-table-column>
        <el-table-column prop="medicationprice" label="药品费用"></el-table-column>
        <el-table-column prop="total" label="总费用"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="doctor" label="医生"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">
              <el-icon name="el-icon-delete"></el-icon> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        paylistData: [],
      };
    },
    mounted() {
        this.fetchPaylist()
      

    },
    computed: {
        user() {
            return this.$store.state.user;
        },
    },
    methods: {
      fetchPaylist() {
        // 发送查询请求
        axios.post('http://127.0.0.1:3000/api/paylist',{name:this.user.name})
          .then(response => {
            this.paylistData = response.data;
          })
          .catch(error => {
            console.error('查询 Paylist 出错：', error);
          });
      },
      handleDelete(id) {
        // 发送删除请求
        axios.delete(`http://127.0.0.1:3000/api/paylist/${id}`)
          .then(response => {
            console.log(response.data.message);
            // 删除成功后刷新列表
            this.fetchPaylist();
          })
          .catch(error => {
            console.error(`删除 Paylist 记录时发生错误：${error}`);
          });
      },
    },
    mounted() {
      // 初始化时查询数据
      this.fetchPaylist();
    },
  };
  </script>
  
  <style scoped>
  /* 样式调整，可以根据需要进行修改 */
  .el-icon-delete {
    font-size: 14px;
    margin-right: 5px;
  }
  </style>
  